<script setup>
import ScrollingNews from '../components/ScrollingNews.vue'
import NewsList from '../components/NewsList.vue'
import StockMarket from '../components/StockMarket.vue'
</script>

<template>
  <main class="min-h-screen bg-gray-50">
    <!-- 滚动新闻 -->
    <ScrollingNews />
    
    <!-- 主要内容区 -->
    <div class="container mx-auto px-2 py-4">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- 左侧主要内容 -->
        <div class="lg:col-span-2 space-y-4">
          <!-- 焦点新闻 -->
          <div class="bg-white border border-news-border rounded-sm overflow-hidden">
            <h2 class="text-lg font-bold p-3 border-b border-news-border">
              <i class="fa fa-star text-primary mr-1"></i> 焦点新闻
            </h2>
            <div class="p-3">
              <h3 class="text-xl font-bold mb-3 text-dark">国务院批复：十地开展综合改革试点</h3>
              <div class="flex space-x-3 mb-4">
                <img 
                  src="https://images.unsplash.com/photo-1542744094-3a31f272c490?q=80&w=600&h=300&auto=format&fit=crop" 
                  alt="国务院批复：十地开展综合改革试点" 
                  class="w-full h-48 object-cover"
                >
              </div>
              <div class="text-gray-600 space-y-3">
                <p>近日，国务院正式批复同意在十个地区开展综合改革试点，这是我国推进改革开放和经济转型升级的重要举措。</p>
                <p>据了解，此次综合改革试点将聚焦重点领域和关键环节，探索形成可复制可推广的经验做法，为全国改革开放大局作出更大贡献。</p>
                <p>相关专家表示，综合改革试点的实施将有助于激发市场活力，推动经济高质量发展，为构建新发展格局提供有力支撑。</p>
              </div>
              <div class="mt-4 text-right">
                <a href="#" class="text-primary hover:underline">
                  阅读全文 <i class="fa fa-angle-right"></i>
                </a>
              </div>
            </div>
          </div>
          
          <!-- 新闻列表 -->
          <NewsList />
        </div>
        
        <!-- 右侧边栏 -->
        <div class="space-y-4">
          <!-- 股票行情 -->
          <StockMarket />
          
          <!-- 财经日历 -->
          <div class="bg-white border border-news-border rounded-sm p-3">
            <h2 class="text-lg font-bold py-2 border-b border-news-border">
              <i class="fa fa-calendar text-secondary mr-1"></i> 财经日历
            </h2>
            <div class="py-3 space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-sm">央行公开市场操作</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded">今日</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-sm">国家统计局公布CPI数据</span>
                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded">明日</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-sm">美联储利率决议</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded">3天后</span>
              </div>
            </div>
            <div class="text-center mt-2">
              <a href="#" class="text-primary text-sm hover:underline">
                查看更多 <i class="fa fa-angle-right"></i>
              </a>
            </div>
          </div>
          
          <!-- 广告位 -->
          <div class="bg-white border border-news-border rounded-sm p-3">
            <h2 class="text-lg font-bold py-2 border-b border-news-border">广告</h2>
            <div class="py-3">
              <img 
                src="https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=300&h=200&auto=format&fit=crop" 
                alt="广告" 
                class="w-full h-40 object-cover"
              >
              <p class="text-center text-sm text-gray-500 mt-2">专业财经服务，助您财富增长</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
/* 主页样式 */
</style>
